<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
	<link rel="stylesheet" href="../res/css/weui.css" />
    <link rel="stylesheet" href="../res/css/weuix.css" />
	<link rel="stylesheet" href="../res/css/common.css" />
    <title></title>
	<script src="../res/js/zepto.min.js"></script>
	<script src="../res/js/zepto.weui.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <script src="../res/js/vue.min.js"></script>
	<script src="../res/js/common.js?v=1"></script>

    <style>
        body{
            height: 100%;
        }
        #app{
            display: flex;
            flex-direction: column;
            align-items: stretch;
            min-height: 100%;
        }
        .top-bar{
            position: sticky;
            position: -webkit-sticky;
            top: 0;
            z-index: 9;
            height: 46px;
            box-shadow: 0 0 8px -4px #e0e0e0;
        }

        .detail-page {
            padding: 10px 10px;
            margin: 10px;
            background: #ffffff;
            position: relative;
            border-radius: 10px;
        }

        .inspect-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        .inspect-name {
            width: 90px;
        }
        .inspect-value {
            flex: 1;
        }

        .time {
            color: #03A6FF;
            margin-bottom: 15px;
            background-color: #ECF6FF;
            padding: 5px;
        }
        .title {
            font-weight: 500;
        }
        .flex-list {
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
        }
        .flex-list > p{
            flex: 1;
        }
        .flex-list > p:nth-child(2) {
            margin: 0 10px;
        }
    </style>
</head>
<body>
    <main id="app">
        <div class="weui-btn_primary weui-header top-bar">
            <div class="weui-header-left"><a class="icon icon-109" @click="pageBack"></a></div>
            <h1 class="weui-header-title">报告详情</h1>
        </div>
        <div class="detail-page" :style="{minHeight: `${pageHeight}px`}">
            <!-- 检查报告 -->
            <div v-if="pageType == 1" class="inspect-list">
                <div class="inspect-item" v-for="(item, index) in inspectList">
                    <div class="inspect-name">{{item.name}}：</div>
                    <div class="inspect-value">{{item.value}}</div>
                </div>
            </div>

            <!-- 检验报告 -->
            <div class="checkout-list" v-else>
                <div class="time">
                    <span>报告时间：</span>
                    <span>{{reportTime}}</span>
                </div>
                <div class="title flex-list" >
                    <p>项目名称</p>
                    <p>结果</p>
                    <p>参考范围</p>
                </div>
                <div class="flex-list" v-for="(item, index) in reportList" :key="index">
                    <p>{{item.item_name}}</p>
                    <p>{{item.exam_value}}</p>
                    <p>{{item.ref_range}}{{item.unit}}</p>
                </div>
            </div>
        </div>
    </main>
</body>
<script>
let params = {}
new Vue({
    el: '#app',
    data: {
        pageHeight: 0,
        pageType: 1,
        inspectList: [{
            name: '检查项目',
            text: 'exam_item',
            value: ''
        },{
            name: '检查类型',
            text: 'exam_type',
            value: ''
        },{
            name: '检查所见',
            text: 'exam_desp',
            value: ''
        },{
            name: '诊断结果意见',
            text: 'diagno_result',
            value: ''
        },{
            name: '检查日期',
            text: 'exam_date',
            value: ''
        },{
            name: '诊断时间',
            text: 'diagno_date',
            value: ''
        },{
            name: '报告日期',
            text: 'reportDate',
            value: ''
        }],
        reportTime: '',
        reportList: []
    },
    methods: {
        pageBack(){
            history.back()
        },
        getDetail() {
            let api = this.pageType == 2 ? '/h5/sichuan/his/selectInspectReportInfo' : '/h5/sichuan/his/selectReportInfo'
            newAjaxPost(api, params, (res) => {
                console.log(res)
                if (this.pageType == 2) {
                    this.reportTime = res.data.selectInspectReportInfoData.input_date
                    this.reportList = res.data.selectInspectReportInfoDataLists
                } else {
                    this.inspectList.forEach(item => {
                        item.value = res.data[item.text]
                    })
                }
            })
        }
    },
    mounted(){
        this.pageType = getQst('type')
        if ( this.pageType == 2) {
            params.archive_date = getQst('archive_date')
            params.dev_code = getQst('dev_code')
            params.inspec_no = getQst('inspec_no')
        } else {
            params.exam_no = getQst('exam_no')
        }
        params.identy_id = getQst('identy_id')
        this.getDetail()
        this.pageHeight = window.innerHeight - 86
    }
})
</script>

</html>